<template>
  <div class="div">
    <div class="headers">
    <div class="buttons">
      <el-button type="primary" icon="Plus" plain @click="handleAdd">添加</el-button>
      <el-button type="danger"  icon="Delete" plain @click="handleDelete">删除</el-button>
      <el-button type="success" icon="Search" plain @click="handleQuery">搜索</el-button>
      <el-button icon="Download">下载板块</el-button>
      <el-button icon="Upload">批量导入</el-button>
    </div>
  </div>
  <div class="tables">
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerCellStyle"  @selection-change="handleSelectionChange">
<!--    <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerCellStyle">-->
      <el-table-column type="selection"/>
      <el-table-column label="单位名称" align="center" prop="id"/>
      <el-table-column label="统一社会信用代码" align="center" prop="depId"/>
      <el-table-column label="所在地区" align="center" prop="checkpersonId"/>
      <el-table-column label="具体地址" align="center" prop="createdTime"/>
      <el-table-column label="单位负责人" align="center" prop="updatedTime"/>
      <el-table-column label="筛查系统负责人" align="center" prop="id"/>
      <el-table-column label="联系电话" align="center" prop="depId"/>
      <el-table-column label="集中TST检测时间" align="center" prop="createdTime"/>
      <el-table-column label="操作" align="center" prop="checkpersonId">
        <template #default="scope">
             <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
              <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
<!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:hosptialmanagement:edit']">修改</el-button>-->
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:hosptialmanagement:remove']">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <!--   添加学校账号对话框 -->
  <el-dialog title="添加账号" v-model="addAccountVisible" width="500px" append-to-body>
    <el-form ref="schoolManagementRef" :model="hosptialManagementForm" :rules="hosptialManagementRules" label-width="80px">
      <el-form-item label="学校" prop="school">
        <el-input v-model="hosptialManagementForm.school" placeholder="请输入学校" />
      </el-form-item>
      <el-form-item label="所在地" prop="address">
        <el-input v-model="hosptialManagementForm.address" placeholder="请输入所在地" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="hosptialManagementForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="hosptialManagementForm.phone" placeholder="请输入手机" />
      </el-form-item>
      <el-form-item label="注册时间" prop="createdTime">
        <el-date-picker clearable
                        v-model="hosptialManagementForm.createdTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择注册时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="登录时间" prop="updatedTime">
        <el-date-picker clearable
                        v-model="hosptialManagementForm.updatedTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择登录时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addSubmitForm">确 定</el-button>
        <el-button @click="addAccountVisible=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
<!--  修改学校账号对话框-->
  <el-dialog title="修改账号" v-model="editAccountVisible" width="500px" append-to-body>
    <el-form ref="editAccountRef" :model="editAccountForm" :rules="editAccountRules" label-width="80px">
      <el-form-item label="学校" prop="school">
        <el-input v-model="editAccountForm.school" placeholder="请输入学校" />
      </el-form-item>
      <el-form-item label="所在地" prop="address">
        <el-input v-model="editAccountForm.address" placeholder="请输入所在地" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="editAccountForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="editAccountForm.phone" placeholder="请输入手机" />
      </el-form-item>
      <el-form-item label="注册时间" prop="createdTime">
        <el-date-picker clearable
                        v-model="editAccountForm.createdTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择注册时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="登录时间" prop="updatedTime">
        <el-date-picker clearable
                        v-model="editAccountForm.updatedTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择登录时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editSubmitForm">确 定</el-button>
        <el-button @click="editAccountVisible=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
  </div>
 

</template>

<script setup name="hosptialmanagement">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const addAccountVisible=ref(false)
const editAccountVisible=ref(false)

const hosptialManagementForm = ref({
  id: '',
  school: '',
  address: '',
  name: '',
  phone: '',
  status: '',
  application: '',
  createdTime: '',
  updatedTime: ''
})
const editAccountForm = ref({
  id: '',
  school: '',
  address: '',
  name: '',
  phone: '',
  status: '',
  application: '',
  createdTime: '',
  updatedTime: ''
})
const editAccountRef=ref({})


const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: '123456',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 新增按钮操作
const handleAdd=()=> {
  console.log(1);
  // reset();
  addAccountVisible.value = true;
  console.log(addAccountVisible.value);
}
// 修改按钮操作
const handleEdit=()=>{
  editAccountVisible.value = true;
}

//删除按钮对话框
const deleteOpen = () => {
  ElMessageBox.confirm(
    '是否确认删除该数据项?',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',

      })
    })
}

//删除方法
const handleDelete=()=>{
  deleteOpen();
  console.log('handleDelete');
}
// 搜索方法
const handleQuery = () => {
  console.log('handleQuery')
}

//添加表单确定按钮操作
const addSubmitForm = () => {
  addAccountVisible.value = false;
}
//修改表单确定按钮操作
const editSubmitForm = () => {
  editAccountVisible.value = false;
}
//多选框操作
const handleSelectionChange = () => {
  console.log('handleSelectionChange')
}

</script>


<style scoped lang="scss">
.headers {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.buttons {
  margin-right: 20px;
}
.tables {
  padding: 20px;
}
</style>